import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js'

const scene = new THREE.Scene();

/**
 * 纹理对象中包含了一些实际开发中会用到的属性和方法
 */
const edgeLength = 512;
const planeGeo = new THREE.PlaneGeometry(edgeLength, edgeLength);
const txrLoader = new THREE.TextureLoader();
txrLoader.load('../../textures/square-outline-textured.png', planeTxr => {
  /* 阵列 */
  // 设置阵列映射（可选映射模式查看constant.md 中 包裹模式 部分）
  planeTxr.wrapS = THREE.MirroredRepeatWrapping; // .wrapS 纹理在水平方向包裹模式
  planeTxr.wrapT = THREE.MirroredRepeatWrapping; // .wrapT 纹理在垂直方向包裹模式
  planeTxr.repeat.set(edgeLength / planeTxr.image.width, edgeLength / planeTxr.image.height); // 设置 U V 方向重复次数

  /* 偏移 */
  // 偏移范围 -1 ~ 1
  planeTxr.offset = new THREE.Vector2(.5, .5);

  /* 旋转 */
  // 设置纹理的旋转中心
  planeTxr.center.set(.5, .5);
  planeTxr.rotation = Math.PI / 4;


  const planeMat = new THREE.MeshLambertMaterial({
    map: planeTxr,
    side: THREE.DoubleSide
  });
  const plane = new THREE.Mesh(planeGeo, planeMat);
  scene.add(plane);
});

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 400,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
})();